<template>
  <div v-html="html" class="markdown-content"></div>
</template>

<script>
import  Remarkable  from './Remarkable.js';

export default {
  props:{
    fileName:{
      type:String,
      default:''
    }
  },
  data(){
    return {
      html:'加载中...'
    }
    
  },
  created() {
    this.getMd()
  },
  methods:{
    async getMd(){
      const res = await fetch(`/demo-readme/${this.fileName}.md`)
      if(!res.ok) return
      const md = await res.text()
      this.html = Remarkable.render(md)
    }
  }
}
</script>

<style>
.markdown-content>table {
    border-collapse: collapse;
    width: 100%;
    background-color: #fff;
    font-size: 14px;
    margin-bottom: 45px;
    line-height: 1.5em
}

.markdown-content>table strong {
    font-weight: 400
}

.markdown-content>table td,.markdown-content>table th {
    border-bottom: 1px solid #dcdfe6;
    padding: 15px;
    max-width: 250px
}

.markdown-content>table th {
    text-align: left;
    white-space: nowrap;
    color: #909399;
    font-weight: 400
}

.markdown-content>table td {
    color: #0c1e41
}

.markdown-content>table td:first-child,.markdown-content>table th:first-child {
    padding-left: 10px
}

.markdown-content>ul:not(.timeline) {
    margin: 10px 0;
    padding: 0 0 0 20px;
    font-size: 14px;
    color: #5e6d82;
    line-height: 2em
}
.markdown-content>pre {
    background-color: #f7F8fb;
}
</style>